<template>
	<div class="city">
		<city-header></city-header>
		<city-search :cities="cities"></city-search>
		<city-list 
			:cities="cities" 
			:hotCity="hotCities"
			:letter="letter"
		>
		</city-list>
		<alphabet 
			:cities="cities" 
			@change="changeLetterHandle"
		></alphabet>
	</div>
</template>

<script>
	import axios from 'axios'
	import cityHeader from './components/header'
	import citySearch from './components/search'
	import cityList from './components/list'
	import alphabet from './components/alphabet'
	export default {
		name:'city',
		components: {
			cityHeader,
			citySearch,
			cityList,
			alphabet
		},
		data() {
			return {
				cities:{},
				hotCities:[],
				letter:''
			}
		},
		methods: {
			getCityInfo() {
				axios.get('/api/city.json')
					.then(this.getCityInfoSucc)
			},
			getCityInfoSucc(res) {
				res=res.data;
				if(res.ret && res.data) {
					const data=res.data;
					this.cities=data.cities;
					this.hotCities=data.hotCities;
				}
			},

			/*点击字母表时获取到的所点击的字母*/
			changeLetterHandle(letter) {
				this.letter=letter;
			}
		},
		/*获取ajax数据*/
		mounted() {
			this.getCityInfo()
		}
	}
</script>

<style lang="scss" scoped>

</style>